<template>
  <div>
    <r-search :searchHandle="searchHandleAdd" />
    <r-table
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    var checkpass2 = (rule, value, callback) => {
      if (value != this.formDataEditPsw.password) {
        callback(new Error("The password is not the same!"));
      } else {
        callback();
      }
    };
    return {
      searchHandleAdd: [
        {
          label: "New Service Tel",
          type: "primary",
          plain: true,
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormVisible(),
          isShow: () =>
            sessionStorage.getItem("role") == "operator" ? true : false
        }
      ],

      tableData: [],
      tableCols: [
        // {
        //     label: 'id号',
        //     prop: 'id'
        // },

        {
          label: "Region Name",
          prop: "areaName"
        },
        {
          label: "Phone",
          prop: "phone"
        },
        {
          label: "Operations",
          type: "button",
          width: 230,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              icon: "el-icon-folder-opened",
              plain: true,
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "danger",
              icon: "el-icon-delete",
              plain: true,
              handle: row => {
                this.$confirm("Confirm Delete?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    var res = await this.apis.operatorPhoneDelete({
                      id: row.id
                    });
                    if (res.code === 200) {
                      this.$message({
                        type: "success",
                        message: "Delete Success!"
                      });
                    } else {
                      this.$message({
                        type: "danger",
                        message: "Delete Failure"
                      });
                    }

                    this.init();
                  })
                  .catch(() => {
                    this.$message({
                      type: "primary",
                      message: "Already Canceled"
                    });
                  });
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        areaName: "",
        phone: "",
        id: ""
      },
      formCols: [
        {
          type: "input",
          label: "Region Name",
          placeholder: "Please Input Region Name",
          width: 350,
          prop: "areaName"
        },
        {
          type: "input",
          label: "Phone",
          placeholder: "Please Enter Phone,Up to 3, separated by commas",
          width: 350,
          prop: "phone"
        }
        // { type: "select", label: "选择User", placeholder: '', width: 350, prop: "phone", },
      ],
      formRules: {
        areaName: [
          { required: true, message: "Please Input", trigger: "blur" }
        ],
        phone: [{ required: true, message: "Please Input", trigger: "blur" }]
        // account: [{ required: true, message: '账号', trigger: 'blur' },],
        // password: [{ required: true, message: '密码', trigger: 'blur' }],
        // enterPassword: [
        //     { required: true, validator: checkpass, message: '两次输入密码不一致', trigger: 'blur' },
        // ],
        // remark: [
        //     { required: true, message: 'Remarks', trigger: 'blur' },
        // ],
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await this.apis.operatorPhoneList();
      if (res) {
        this.tablePage.total = res.total;
        this.tableData = res.rows || [];
      }
    },
    // Edit按钮里面---确认按钮
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (!this.formData.id) {
            const res = await this.apis.operatorPhoneAdd({
              phone: this.formData.phone,
              areaName: this.formData.areaName
            });
          } else {
            const res = await this.apis.operatorPhoneUpdate({
              phone: this.formData.phone,
              areaName: this.formData.areaName,
              id: this.formData.id
            });
          }
          this.elFormVisible();
          this.init();
        }
      });
    },
    // Edit按钮
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.elFormVisible();
    },
    elFormDetailEditPsw(row) {
      Object.keys(this.formDataEditPsw).forEach(key => {
        this.formDataEditPsw[key] = row[key];
      });
      this.formDataEditPsw.id = row.id;
      this.formDataEditPsw.name = row.name;
      this.formDataEditPsw.phone = row.phone;
      this.formDataEditPsw.password = "";
      this.elFormVisibleEditPsw();
    },
    elFormVisibleEditPsw(tit) {
      if (this.$refs.elFormEditPsw.$refs.ruleFormEditPsw) {
        this.$refs.elFormEditPsw.$refs.ruleFormEditPsw.resetFields();
        this.$data.formDataEditPsw = this.$options.data.call(
          this
        ).formDataEditPsw;
      }
      this.$refs.elFormEditPsw.dialogFormVisible = !this.$refs.elFormEditPsw
        .dialogFormVisible;
      this.$refs.elFormEditPsw.dialogFormTitle = tit
        ? tit
        : this.formDataEditPsw.id
        ? "Edit"
        : "Add";

      if (this.$refs.elFormEditPsw.dialogFormVisible) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
      }
    },
    async elFormSubmitEditPsw() {
      let res = await this.api.putop(this.formDataEditPsw);
      if (res) {
        this.formData.id = "";
        this.elFormVisibleEditPsw();
        this.init();
      }
    },
    //FrozenForbidden
    elFormDetailActive(row) {
      Object.keys(this.formDataActive).forEach(key => {
        this.formDataActive[key] = row[key];
      });
      this.formDataActive.id = row.id;
      this.elFormVisibleActive();
    },
    elFormVisibleActive(tit) {
      if (this.$refs.elFormActive.$refs.ruleFormActive) {
        this.$refs.elFormActive.$refs.ruleFormActive.resetFields();
        this.$data.formDataActive = this.$options.data.call(
          this
        ).formDataActive;
      }
      this.$refs.elFormActive.dialogFormVisible = !this.$refs.elFormActive
        .dialogFormVisible;
      this.$refs.elFormActive.dialogFormTitle = tit
        ? tit
        : this.formDataActive.id
        ? "Edit"
        : "Add";

      if (this.$refs.elFormActive.dialogFormVisible) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
      }
    },
    async elFormSubmitActive() {
      let res = await this.api.opstate(this.formDataActive);
      if (res) {
        this.elFormVisibleActive();
        this.init();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
